<template>
  <div class="center-header">
    <div class="avatar" @click="$router.push('/avatar')">
      <img :src="user.avatar" v-if="user && user.avatar">
      <span class="cubeic-smile avatar-icon" v-else></span>
    </div>
    <div class="info">
<!--      <p class="merchant" v-if="user.merchant && +user.merchant.status === 1">{{ user.merchant.name }}</p>-->
      <p class="nickname">{{ user.nickname || mobileText(user.mobile) }}</p>
      <p class="desc">
        <span class="level" v-if="user.level0">
          <i class="cubeic-vip" v-if="+user.level > 0"></i>{{ user.level0.display }}
          <template v-if="user.groupLevel0 && false">({{user.groupLevel0.name}})</template>
        </span>
        <span class="id">帐号ID:{{ user.id }}</span>
        <span class="id" v-if="user.level2 && user.level2.value > 0">({{user.level2.name}})</span>
      </p>
      <p v-if="user.city" class="city">{{user.city}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CenterHeader',
  props: ['user'],
  methods: {
    mobileText(v) {
      return v ? v.substring(0, 3) + '****' + v.substring(7) : ''
    }
  }
}
</script>

<style scoped lang="stylus">
.center-header
  box-sizing border-box
  height 200px
  padding 30px 10px
  background url("../../../assets/images/center.png")
  background-size cover
  background-repeat no-repeat
  background-position center bottom
  padding-top 20px
  padding-bottom 110px
  box-sizing border-box
  display flex
  .avatar
    width 75px
    height 75px
    background white
    border-radius 50%
    overflow hidden
    .avatar-icon
      font-size 75px
      color $main_color
      opacity 0.75
    img
      width 100%
      height 100%
  .info
    flex 1
    text-align left
    padding 16px 10px
    box-sizing border-box
    .merchant
      color $second_color
      font-size 20px
      margin-top -10px
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      width 180px
    .nickname
      font-weight 700
      font-size 18px
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      color white
      width 180px
    .desc
      margin-top 10px
      .level
        font-weight 700
        //font-size 14px
        color $main_color
        background white
        padding 3px 10px
        border-radius 10px
      .id
        margin-left 10px
        color white
    .city
      color white
      margin-top 10px

</style>
